<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>客服列表</title>

<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/hyqcss/public.css">
<link rel="stylesheet" href="/fission/css/common.css">
<script src="/cdn/echarts.min.js"></script>
<style type="text/css">
	body{
		background: #e9e9e9;
	}
	/*公共头部带搜索*/
	.public_container{
		margin: 20px;
		background: #fff;
	}
	.public_title_container{
		height: 54px;
		padding: 0 20px;
		font-size: 14px;
		display: flex;
		align-items: center;
		background: #f9f9f9;
		border-bottom: 1px solid #f0f0f0;
	}
	.public_title_container p{
		margin-right: 30px;
		height: 54px;
		line-height: 54px;
		cursor: pointer;
	}
	.public_title_container a{
		margin-right: 30px;
		height: 54px;
		line-height: 54px;
		cursor: pointer;
	}
	.public_title_active{
		color: #1E9FFF;
		border-bottom: 1px solid #1E9FFF;
	}
	.public_buttonSearch_container{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		background: #fff;
	}
	.public_buttonSearch_container a{
		color: #fff;
		background-color: #1E9FFF;
		text-shadow: 0 -1px 0 rgba(0,0,0,.12);
		height: 24px;
		padding: 4px 15px;
		font-size: 14px;
		border-radius: 2px;
		display: flex;
		align-items: center;
	}
	.public_Search_container{
		position: relative;
	}
	.public_Search_container input{
		width: 240px;
		height: 32px;
		border: 1px solid #d9d9d9;
	}
	.public_Search_container i{
		position: absolute;
		bottom: 6px;
		right: 10px;
		cursor: pointer;
	}
	
	/*统计页面*/
	.public_statisticsHeader_content{
		padding: 20px 20px 0 20px;
	}
	.public_statisticsHeader_contaienr{
		/*margin-bottom: 20px;*/
		display: flex;
		justify-content: space-between;
		padding: 13px 20px;
		border: 1px solid #e0e0e0;
		background: #f9f9f9;
	}
	.qrcode_statistics_content{
		display: flex;
		border-bottom: 1px solid #e0e0e0;
		border-left: 1px solid #e0e0e0;
		border-right: 1px solid #e0e0e0;
		margin: 0 20px;
	}
	.qrcode_statisticsEcharts_container{
		flex: 3;
		padding: 20px 0 10px 0;
		border-right: 1px solid #e0e0e0;
	}
	.qrcode_statisticsOther_container{
		flex: 1;
		padding: 20px 20px 10px 20px;
	}
	.qrcode_statisticsOther_container{

	}
	.qrcode_statisticsOther_container h3{
		color: #333;
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.qrcode_statisticsOther_container h5{
		color: #8c8c8c;
		font-size: 14px;
		text-align: center;
	}
	.qrcode_statisticsOther_List{

	}
	.qrcode_statisticsOther_List li{
		border-top: 1px dashed #e0e0e0;
		border-bottom: 1px dashed #e0e0e0;
		border-right: 1px dashed #e0e0e0;
		border-left: 2px solid #5b8ff9;
		height: 46px;
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}
	.qrcode_statisticsOther_List li span{
		font-size: 14px;
		color: #595959;
	}
	.qrcode_statisticsOther_List li b{
		font-size: 14px;
		color: #f5222d;
	}
	.addChannels{
		border-left: 1px dashed #e0e0e0 !important;
		cursor: pointer;
		justify-content: center !important;
		color: #595959;
		font-size: 14px;
	}
</style>
<style type="text/css">
	.slide-btn{
		width:100px;
		display:inline-block;
		border:1px solid;
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		border-radius:5px;
		position: relative;
		overflow: hidden;
		cursor: pointer;
	}
	.slide-btn .inner-on,.slide-btn .inner-off{
		width:151px;
		box-sizing:border-box;
		display: inline-block;
		position: relative;
		left:0;
		cursor: pointer;
		transition:left 0.5s;
	}
	.inner-on .left,.inner-off .left{
		width: 50px;
		color: #fff;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		background:#58b058;
		text-align:center;
		display: inline-block;
		padding: 4px 0;
	}
	.inner-on .space,.inner-off .space{
		width: 51px;
		display: inline-block;
		box-sizing:border-box;
		padding: 4px 0;
		color: #fff;
		background-color: #f5f5f5;
		border-left: 1px solid #cccccc;
		border-right: 1px solid #cccccc;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	}
	.inner-on .right,.inner-off .right{
		width: 50px;
		color: #fff;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		background:#f9a123;
		text-align:center;
		display: inline-block;
		padding: 4px 0;
	}
	.customSwitch .layui-form-switch{
	  margin-top: 0 !important;
	}
	.layui-table tr{
	  height: 48px;
	}
</style>
</head>
<body>
<div class="public_container">
	<div class="qrcode_table_container" style="display: block;">
		<div class="public_buttonSearch_container">
			<a href="add.html">+ 新建客服账号</a>
			<form  method="get" action="" id="Form1">
			<div class="public_Search_container">
				<input type="text" id="index" value="{$name}" placeholder="请输入客服名称进行搜索" autocomplete="off" class="layui-input">
				<i class="layui-icon layui-icon-search" onclick="index()"></i>
			</div>
			</form>
		</div>
		<div class="public_table_container layui-form">
			<table class="layui-table" lay-skin="line"> 
			    <thead>
			      <tr>
			        <th>客服账号头像</th>
			        <th>客服账号名称</th>
			        <th>状态</th>
			        <th>客服账号链接</th>
			        <th>操作</th>
			      </tr> 
			    </thead>
			    <tbody>
			      {loop $user_list as $user}
				  <tr>
					<td><img src="{$user['image']}" width="50px"></td>
					<td>{$user['name']}</td>
					<td style="width: 300px;">接待人员：{$user["userid"]?:未配置}</td>
					<td>
						<a class="table-public-btn" onclick="corps({$user['id']})">复制链接</a>
						<a class="table-public-btn" href="download_qrcode-{$user['id']}.html">下载</a>
					</td>
					<td>
						<a class="table-public-btn" href="upd-{$user['id']}.html">编辑</a>
						<a class="table-public-btn" onclick="del({$user['id']})">删除</a>
						<a class="table-public-btn" onclick="updateServicer({$user['id']})">编辑接待人员</a>
					</td>
				  </tr>
				{/loop}
			    </tbody>
			</table>
		</div> 
		<!-- 公共表格部分 end-->
		<div class="main-container-h pageing-container-h">
        <div class="pageing-content-h">
            <span>{$p->totalnum}条/{$p->totalpage}页</span>
        </div>
      	<ul class="pageing-content-h">{P weidogsadmin}</ul>
     	</div>
	</div>
	
</div>
<div class="layui-form" id="updateDiv" style="display: none;padding: 30px;" >
	<form id="updateUser" class="layui-form">
		<input type="hidden" name="serviceUserId" id="serviceUserId" value="">
		<div class="">
			<div class="allocation-clue-div">
	          <h2 class="" style="text-align: center; font-size: 20px; font-weight: bold; padding-bottom: 20px;"> 编辑接待人员 </h2>
	          <div class="layui-form-item">
	              <label class="layui-form-label">选择员工:</label>
	              <div class="layui-input-block">
	                <span class="layui-btn layui-btn-primary" id="addPeople">+ 前往添加</span>
	              </div>
	              <input type="hidden" name="checkUser" id="checkUser"/>
	              <div id="checkUserCon"></div>
	          </div>
	        </div>
		</div>	
		<div class="" style="display: flex; justify-content: flex-end;">
          <button id="" type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="parent.layer.closeAll()" style=""> 取消</button>
          <a id="" type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="updateUser" style=""> 确定</a>
        </div>
	</form>
</div>
<script src="/cdn/jquery.js"></script>
<script src="/layui/layui.js"></script>
<script src="/js/ajax.js"></script>
<script type="text/javascript">
	layui.use(['element', 'layer', 'form'], function () {
		var layer = layui.layer;
		var form = layui.form;
		form.on('submit(updateUser)',function(data){
	        if(data.field.checkUser == ''){
	          layer.msg('请选择员工'); return;
	        }
	        var formDataUpdateClue = $('#updateUser').serialize();
	        myAjaxPost(false, true, 'update_service_user.html', formDataUpdateClue, function (resp) {
	            console.log(resp);
	          if (resp.status == 'success') {
	            layer.msg(resp.msg);
	            setTimeout(function(){
	              //parent.layer.closeAll('iframe');
	              location.reload();
	            },500);
	          }else{
	            layer.msg(resp.msg);
	          }
	        });
      })
	});
</script>
<script type="text/javascript">
	function updateServicer(id){
		$("#serviceUserId").val(id);
		$("#checkUser").val('');
		$("#checkUserCon").val('');
		layer.open({
			title: [' ', 'font-weight:bold;'],
	        type: 1,
	        area: ['700px', '300px'],
	        shadeClose: true,
        	content: $('#updateDiv')
		}); 
	}

	$('#addPeople').on('click',function(){
		var id = $("#serviceUserId").val();
      layer.open({
        type: 2,
        title: '请选择使用人员',
        shadeClose: true,
        shade: 0.2,
        area: ['700px', '530px'],
        content: 'select_user-'+id+'.html'
      }); 
    })
	

	function corps(id){
		myAjaxPost(false, true, 'corp.html',{ id:id}, function (resp) {
			tusi(resp.msg);
			if(resp.status == "success"){
				var content = resp.data;
				var aux = document.createElement("input"); 
				aux.setAttribute("value", content); 
				document.body.appendChild(aux); 
				aux.select();
				document.execCommand("copy"); 
				document.body.removeChild(aux);
			}
		})
	}

	function del(id){
		myAjaxPost(false, true, 'del.html',{ id:id}, function (resp) {
			if (resp.status == 'success') {
				tusi(resp.msg);
				setTimeout(function(){ 
					location.reload(); 
				},2000);
			}else{
				tusi(resp.msg);
			}
		})
	}
	function index(){
		var name = $("#index").val();
        window.location.href = window.location.pathname+"?name="+name;
	}
</script>
</body>
</html>